<template>
	<view>
		<!-- 输入框 -->
		<view class="input">
			<!-- 图标 -->
			<view class="input-icon">
				<image src="https://lt.caomei.zone/xcxstatic/static/img/search.png" mode=""></image>
			</view>
			<!-- 输入框 -->
			<view class="input-entry">
				<input type="text" placeholder="搜索人脉" value="" />
			</view>
		</view>
		<!-- 下拉框 -->
		<view class="select">
			<view class="left-select">
				<uni-data-select placeholder='行业' v-model="hyvalue" :localdata="hyrange"
					@change="hychange"></uni-data-select>
			</view>

			<view class="right-select">
				<uni-data-picker style="height: 100%;" placeholder='地区' v-model="dqvalue" :localdata="dqrange"
					:clear-icon='true' @change="dqchange"></uni-data-picker>
			</view>
		</view>
		<!-- connectist -->
		<view class="connectList">

			<!-- <connec-order :userInfo="range" @s="submit(data)"></connec-order> -->

			<view class="list-card" v-for="(item,index) in list" :key="index">
				<!-- 头像信息 -->
				<view class="user-info">
					<view class="top-img">
						<image :src="item.headimg" mode=""></image>
					</view>
					<!-- 内容 -->
					<view class="top-conten">
						<view class="top-card">
							<view class="title">
								{{item.realname}}
							</view>
							<!-- 人数 -->
							<view class="map bgTheme">
								联系TA
							</view>
						</view>
						<!-- 介绍 -->
						<view class="include">
							<text> {{item.city}}</text>
							<text class="jg">|</text>
							<text>{{item.field2}}</text>
							<text class="jg">|</text>
							<text>{{item.field4}}</text>
						</view>
					</view>
				</view>
				<!-- 地址 -->
				<view class="address">
					<view class="addressIcon">
						<uni-icons type="location-filled" size="30"></uni-icons>
					</view>
					<view class="addressDetail">
						{{item.address}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import connecOrder from '../../components/connectOrder/connectOrder.vue'
	var app = getApp();
	export default {
		// components:{
		// 	connecOrder
		// },
		data() {
			return {
				hyvalue: '',
				dqvalue: -1,
				hyrange: [{
					sort: 1,
					text: "政府人脉",
					value: 1
				}],
				dqrange: [{
					"text": "河北省",
					"value": "36",
					"children": [{
							"text": "石家庄市",
							"value": "37"
						},
						{
							"text": "唐山市",
							"value": "59"
						},
						{
							"text": "秦皇岛市",
							"value": "74"
						},
						{
							"text": "邯郸市",
							"value": "82"
						},
						{
							"text": "邢台市",
							"value": "102"
						},
						{
							"text": "保定市",
							"value": "122"
						},
						{
							"text": "张家口市",
							"value": "146"
						},
						{
							"text": "承德市",
							"value": "163"
						},
						{
							"text": "衡水市",
							"value": "203"
						},
						{
							"text": "省直辖县级行政区划",
							"value": "215"
						}
					]
				}],
				list: []
			};
		},
		onLoad() {
			this.getZy()
			this.getDqData()
			this.getTypeList()
			this.getRenmai()
		},
		methods: {
			submit(data) {
				console.log(data)
			},
			getTypeList() {
				app.get("ApiMingpian/serachtype", {}, (res) => {
					if (res.status == 1)
						console.log(res)
					else {
						app.alert('查找出错请稍后再试')
					}
				})
			},
			getZy() {
				app.post('ApiRenMai/prlist', {}, (res) => {
					this.hyrange = res.data.map(item => ({
						value: item.id,
						text: item.name,
						sort: item.sort
					}));
					this.hyrange.reverse()
					console.log(this.hyrange)
				})
			},
			getDqData() {
				let that = this
				app.get('ApiIndex/getCustom', {}, function(customs) {
					var url = app.globalData.pre_url + '/static/area.json';
					if (customs.data.includes('plug_zhiming')) {
						url = app.globalData.pre_url + '/static/area_gaoxin.json';
					}
					uni.request({
						url: url,
						data: {},
						method: 'GET',
						header: {
							'content-type': 'application/json'
						},
						success: function(res2) {
							for (const key in res2.data) {
								// 删除第三层children属性
								for (const i in res2.data[key].children) {
									delete res2.data[key].children[i].children
								}
							}
							that.dqrange = res2.data
							console.log(that.dqrange)
						}
					});
				});
			},
			getRenmai() {
				app.post('ApiMingpian/serachmingpian', {
					serach_type: '',
					keyword: ''
				}, (res) => {
					console.log(res)
				})
			},
			hychange(e) {
				console.log(this.hyrange[e - 1].text)
				app.post('ApiMingpian/serachmingpian', {
					serach_type: 'provide_resource',
					keyword: this.hyrange[e - 1].text
				}, (res) => {
					this.list = res.data.map(item => ({
						...item,
						city: item.address.substring(0, item.address.indexOf("市"))
					}));
					console.log(this.list)
				})
			},
			dqchange(e) {
				let address=''
				for (const item of e.detail.value){
					address=address+item.text
				}
				console.log(address)
				app.post('ApiMingpian/serachmingpian', {
					serach_type: 'address',
					keyword: address
				}, (res) => {
					console.log(res)
					this.list = res.data.map(item => ({
						...item,
						city: item.address.substring(0, item.address.indexOf("市"))
					}));
					console.log(this.list)
				})
			}
		}
	}
</script>

<style lang="less">
	.input {
		width: 94%;
		position: relative;
		margin-top: 2%;
		display: flex;
		height: 80rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: #FFFFFF;
		box-shadow: 0 0 4rpx 2rpx #FFF6F3;
		border-radius: 15rpx;

		.input-entry {
			width: 84%;
			height: 100%;

			input {
				width: 100%;
				height: 100%;
			}
		}

		.input-icon {
			width: 16%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 50%;
				height: 60%;
			}
		}
	}

	// 下拉框
	.select {
		width: 94%;
		display: flex;
		margin: 4% auto;
		justify-content: space-between;

		.left-select,
		.right-select {
			width: 48%;
			height: 68rpx;
			background-color: #FFFFFF;
			border-radius: 25rpx;

			::v-deep .uni-select {
				height: 100%;
				width: 50%;
				margin: 0 auto;
			}

			::v-deep .uni-select {
				border: none;
			}
		}
	}

	.list-card {
		position: relative;
		width: 95%;
		height: 250rpx;
		background-color: #FFFFFF;
		border-radius: 25rpx;
		margin: 3% 0;
		left: 50%;
		transform: translateX(-50%);

		.address {
			height: 100rpx;
			display: flex;
			// justify-content: space-between;
			align-items: center;
			padding: 0 15rpx;
			color: #838384;
		}
	}

	.user-info {
		width: 100%%;
		height: 150rpx;
		padding: 15rpx;
		border-radius: 15rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.top-img {
			background-color: #007AFF;
			height: 110rpx;
			width: 17%;
			border-radius: 100%;

			image {
				width: 100%;
				height: 100%;
				border-radius: 100%;
			}
		}

		.top-conten {
			width: 79%;
			height: 110rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.top-card {
				display: flex;
				justify-content: space-between;

				.title {
					font-size: 35rpx;
					font-weight: 600;
				}
			}

			.include {
				text {
					// margin-right: 2%;
					font-size: 24rpx;
					color: #4c4c4d;
				}

				.jg {
					margin: 0 1.5%;
				}

				.more {
					color: #994275;
				}

			}

			.map {
				width: 180rpx;
				height: 48rpx;
				font-size: 25rpx;
				border-radius: 60rpx;
				// background-color: #994275;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
			}
		}

		.address {
			display: none;
		}
	}
</style>